<template>
  <div>
    <router-view/>
    <el-container>
      <el-aside width="400px">
        <div>
          <el-button @click="openCamera" style="margin-top: 20px">打开摄像头</el-button>
          <el-button type="success" @click="takePhoto" style="margin-top: 20px">拍照识别</el-button>
          <video ref="video" width="320" height="240"></video>
          <canvas ref="canvas" width="320" height="240" style="display: none;"></canvas>
          <!--    <img :src="photoDataUrl" alt="拍照的图片">-->
        </div>

        <el-row>
          <el-col :span="12">
            <el-upload style="margin-left: 40px;margin-top: 40px"
                       ref="uploadRef"
                       class="avatar-uploader"
                       :show-file-list="false"
                       :auto-upload="true"
                       action="http://localhost:8088/file/upload"
                       name="file"
                       :on-success="res => uploadSuccess(res.data)"
            >
              <img v-if="imgUrl" :src="imgUrl" class="avatar" width="333"/>
              <img v-else src="@/assets/avatar.png" width="333"/>
            </el-upload>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-autocomplete
            class="inline-input"
            v-model="doName"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            :trigger-on-focus="false"
            @select="handleSelect"
        ></el-autocomplete>
        <el-button type="success" icon="el-icon-check" @click="charFormsg"
                   style="margin-left: 10px;margin-bottom: 20px"></el-button>
      </el-aside>
      <el-container>
        <el-header class="styled-header">
          <el-menu mode="horizontal" @select="handleSelect" router="router">
            <el-menu-item index="/drug">药品检索</el-menu-item>
            <el-menu-item index="/case">病例说明</el-menu-item>
            <el-menu-item index="/symptom">症状查询</el-menu-item>
            <el-menu-item index="/place">医院信息查找</el-menu-item>
            <el-button type="text" @click="centerDialogVisible = true">？使用说明</el-button>
          </el-menu>
        </el-header>
        <el-main
            style=" align-items: center; flex-direction: column; height: 580px; max-width: 100%;">
          <div style="display: flex; align-items: center; margin-bottom: 10px; width: 50%; margin: 0 auto;">
            <el-card class="box-card" shadow="hover">
              <el-descriptions class="margin-top" :column="3">
                <el-descriptions-item label="药品名">{{ name }}</el-descriptions-item>
              </el-descriptions>
            </el-card>

          </div>
          <div style="display: flex; flex-wrap: wrap;">
            <div style="display: flex; flex-wrap: wrap;width: 94%;">
              <el-card class="box-card" shadow="hover" style="margin-right: 5px; flex: 1;">
                <el-descriptions class="margin-top" :column="3">
                  <el-descriptions-item label="药品作用">{{ introduction }}</el-descriptions-item>
                </el-descriptions>
                <el-button type="success" @click="speakTtsSpeech">语音播报</el-button>
              </el-card>

              <el-card class="box-card" shadow="hover" style="margin-right: 5px; flex: 1;">
                <el-descriptions class="margin-top" :column="3">
                  <el-descriptions-item label="不良反应">{{ introduction1 }}</el-descriptions-item>
                </el-descriptions>
                <el-button type="success" @click="speakTtsSpeech1">语音播报</el-button>
              </el-card>
            </div>

            <div style="display: flex; flex-wrap: wrap; width: 94%;margin-top: 10px">
              <el-card class="box-card" shadow="hover" style="margin-right: 5px;flex: 1;">
                <el-descriptions class="margin-top" :column="3">
                  <el-descriptions-item label="饮食建议">{{ introduction2 }}</el-descriptions-item>
                </el-descriptions>
                <el-button type="success" @click="speakTtsSpeech2">语音播报</el-button>
              </el-card>

              <el-card class="box-card" shadow="hover" style="margin-right: 5px;flex: 1;">
                <el-descriptions class="margin-top" :column="3">
                  <el-descriptions-item label="禁忌">{{ introduction3 }}</el-descriptions-item>
                </el-descriptions>
                <el-button type="success" @click="speakTtsSpeech3">语音播报</el-button>
              </el-card>
            </div>

            <el-card class="box-card1" shadow="hover">
              <el-descriptions class="margin-top">
                <el-descriptions-item label="相似药推荐">{{ introduction4 }}</el-descriptions-item>
              </el-descriptions>
              <el-button type="success" @click="speakTtsSpeech4">语音播报</el-button>
            </el-card>
          </div>
        </el-main>
      </el-container>
    </el-container>
    <el-dialog
        title="提示"
        :visible.sync="centerDialogVisible"
        width="70%"
        center>
      <div style="display: flex;">
        <span><img src="@/assets/helpme1.png" style="width: 80%; height: auto;" alt=""/></span>
        <span><img src="@/assets/helpme2.png" style="width: 80%; height: 80%;" alt=""/></span>
        <span><img src="@/assets/helpme3.png" style="width: 80%; height: auto;" alt=""/></span>
      </div>
      <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import request from "@/utils/request";
import Speech from 'speak-tts'

export default {

  data() {
    return {
      //图片上传功能
      imgUrl: '',
      dialogImageUrl: '',
      dialogVisible: false,
      doName: '',
      //主显示内容
      name: '',
      introduction: '', introduction1: '', introduction2: '', introduction3: '', introduction4: '',
      speech: '',
      //使用说明
      centerDialogVisible: false,
      //拍的照片存储的容器
      photoDataUrl: '',
      stream: null,
      videoElement: null,
      canvasElement: null,
    };
  },
  methods: {
    navigateTo(route){
      this.$router.push(route);
    },

    // 播报系统js
    //初始化播报系统
    speechInit() {
      this.speech = new Speech();
      this.speech.setLanguage("zh-CN");
      this.speech.init().then(() => {
      });
    },
    //为按钮添加了点击播报事件
    speakTtsSpeech() {
      this.speech.speak({text: this.introduction}).then(() => {
      });
    },
    speakTtsSpeech1() {
      this.speech.speak({text: this.introduction1}).then(() => {
      });
    },
    speakTtsSpeech2() {
      this.speech.speak({text: this.introduction2}).then(() => {
      });
    },
    speakTtsSpeech3() {
      this.speech.speak({text: this.introduction3}).then(() => {
      });
    },
    speakTtsSpeech4() {
      this.speech.speak({text: this.introduction4}).then(() => {
      });
    },


    //图片上传成功的回调
    uploadSuccess(data) {
      this.imgUrl = data.url
      this.name = data.name
      this.introduction = data.intro[0]
      this.introduction1 = data.intro[1]
      this.introduction2 = data.intro[2]
      this.introduction3 = data.intro[3]
      this.introduction4 = data.intro[4]
    },
    charFormsg() {
      request.post("ask/search", {name: this.doName}).then(res => {
        if (res.code === 1) {
          this.name = res.data.name
          this.introduction = res.data.intro[0]
          this.introduction1 = res.data.intro[1]
          this.introduction2 = res.data.intro[2]
          this.introduction3 = res.data.intro[3]
          this.introduction4 = res.data.intro[4]
          this.$message.success('上传文字成功');
        } else {
          this.$message.error('出错啦,' + res.code);
        }
      })
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    loadAll() {
      return [
        {"value": "硫酸氢氯吡格雷片"}, {"value": "镇咳糖浆"},
        {"value": "正清风痛宁缓释片"}, {"value": "阿咖酚散解热止痛散(头痛散)"},
        {"value": "阿咖酚散"}, {"value": "阿莫西林胶囊"},
        {"value": "阿奇霉素干混悬剂"}, {"value": "阿司匹林肠溶片"},
      ];
    },
    handleSelect(item) {
      console.log(item);
    },

    //摄像头上传拍照
    openCamera() {
      /*
      调用了 navigator.mediaDevices.getUserMedia 方法
      该方法请求用户授权访问本地设备（例如摄像头、麦克风等） 并返回一个 Promise 对象。
      调用该方法时，代码传入一个配置对象，指定要访问的设备类型
      例如 { video: true } 表示要获取视频流。调用 then 方法来处理成功的情况
      */
      navigator.mediaDevices.getUserMedia({video: true})
          .then((stream) => {
            //将视频流赋值给 Vue 实例的 stream 属性
            this.stream = stream;
            //视频流绑定到 HTML5 的 video 元素上，使用 srcObject 属性来实现，并调用 play 方法播放视频
            this.videoElement.srcObject = stream;
            this.videoElement.play();
            //通过以上的这样的操作，即可实现摄像头视频流的捕获和展示。
          })
          .catch((error) => {
            console.error('打开摄像头失败：', error);
          });
    },
    takePhoto() {
      // 获取 Canvas 元素的上下文对象
      const context = this.canvasElement.getContext('2d');

      // 将视频元素中当前帧的图像绘制到 Canvas 中
      context.drawImage(this.videoElement, 0, 0, this.canvasElement.width, this.canvasElement.height);

      // 将 Canvas 中的图像转换为 Blob 对象
      this.canvasElement.toBlob((blob) => {
        // 创建一个 File 对象
        const file = new File([blob], 'photo.jpg', {type: 'image/jpeg'});

        // 调用 getTracks() 方法遍历摄像头视频流的所有轨道，并逐一停止它们，这样就关闭了摄像头
        this.stream.getTracks().forEach((track) => {
          track.stop();
        });

        // 发送文件给后台
        this.uploadPhoto(file);
      }, 'image/jpeg');
    },
    uploadPhoto(file) {
      // 创建一个 FormData 对象，并将文件添加到其中
      const formData = new FormData();
      formData.append('file', file);
      // 使用 axios 或其他 HTTP 库发送 FormData 对象到后台
      request.post('file/upload', formData)
          .then((res) => {
            console.log('照片上传成功');
            this.imgUrl = res.data.url
            this.name = res.data.name
            this.introduction = res.data.intro[0]
            this.introduction1 = res.data.intro[1]
            this.introduction2 = res.data.intro[2]
            this.introduction3 = res.data.intro[3]
            this.introduction4 = res.data.intro[4]
          })
          .catch((error) => {
            console.error('照片上传失败：', error);
          });
    },
  },
  mounted() {
    this.restaurants = this.loadAll();
    this.speechInit();
    //通过 ref 获取到的 video 元素赋值给组件实例的 videoElement 属性
    this.videoElement = this.$refs.video;
    //通过 ref 获取到的 canvas 元素赋值给组件实例的 canvasElement 属性
    this.canvasElement = this.$refs.canvas;
  }
}
</script>

<style>
.styled-header {
  font-size: 24px; /* 设置字体大小 */
  font-weight: bold; /* 设置字体加粗 */
  color: #333; /* 设置字体颜色 */
  text-align: center; /* 设置文本居中 */
  padding: 20px 0; /* 设置上下内边距 */
  border-bottom: 2px solid #ccc; /* 添加底部边框 */
  background-color: #f0f0f0; /* 设置背景颜色 */
}

.el-header {

  background-color: #cedaf8;
  text-align: center;
}

.el-aside {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
}

.el-main {
  background-color: #f0f0f0;
  color: #333;
  text-align: center;

}

.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 480px;
}

.box-card1 {
  width: 968px;
  margin-top: 10px;
}
</style>